@use 'variables' as *;
@use 'theme';
@use 'layout';
@use 'messages';
@use 'chat-items';
@use 'markdown';

// 全局样式
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: $text-color;
  background-color: $bg-color;
}

// Element Plus 自定义样式
.el-input {
  --el-input-bg-color: var(--sidebar-color);
  --el-input-text-color: var(--text-color);
  --el-input-border-color: var(--border-color);
}

.el-button-group {
  gap: $spacing-sm;
}

.el-button--danger {
  --el-button-danger-bg-color: var(--danger-color);
}

// 深色模式下的 Element Plus 样式
.dark-theme {
  // 输入框
  .el-input {
    --el-input-bg-color: var(--sidebar-color);
    --el-input-text-color: var(--text-color);
    --el-input-border-color: var(--border-color);
  }

  // 按钮
  .el-button {
    --el-button-text-color: var(--text-color);
    --el-button-hover-text-color: var(--text-color);
    --el-button-hover-bg-color: var(--sidebar-hover);
    --el-button-hover-border-color: var(--border-color);

    &.el-button--primary {
      --el-button-bg-color: var(--primary-color);
      --el-button-border-color: var(--primary-color);
      --el-button-hover-bg-color: var(--primary-color);
      --el-button-hover-border-color: var(--primary-color);
      --el-button-active-bg-color: var(--primary-color);
      --el-button-active-border-color: var(--primary-color);
    }

    &.el-button--info {
      --el-button-text-color: var(--text-color);
      --el-button-bg-color: transparent;
      --el-button-border-color: var(--border-color);
      --el-button-hover-text-color: var(--text-color);
      --el-button-hover-bg-color: var(--sidebar-hover);
      --el-button-hover-border-color: var(--border-color);
    }

    &.el-button--danger {
      --el-button-text-color: #fff;
    }
  }

  // 卡片
  .el-card {
    --el-card-bg-color: var(--sidebar-color);
  }

  // 空状态
  .el-empty {
    --el-empty-fill-color-0: var(--sidebar-hover);
    --el-empty-fill-color-1: var(--sidebar-active);
  }
}

// 自定义滚动条
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

// 深色模式下的滚动条
.dark-theme {
  ::-webkit-scrollbar-track {
    background: #2a2a3c;
  }

  ::-webkit-scrollbar-thumb {
    background: #3f3f5c;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #4a4a6a;
  }
}
